<template>
	<view class="xilu-upload-page">
		<!-- 标题 -->
		<view class="xilu-upload-title-bar">
			<view class="title">学生作业</view>
		</view>

		<!-- 作业内容 -->
		<view class="xilu-card">
			<view class="card-title">作业内容</view>
			<view class="coach-content">{{ form.content }}</view>
			<view class="img-upload-area">
				<view v-for="(img, idx) in form.images" :key="idx" class="img-box">
					<image :src="web_url + img" class="img-preview"></image>
				</view>
			
			</view>
			<view class="job-time" v-if="form.time">{{ form.time }}</view>
		</view>

		<!-- 老师评语 -->
		<view class="xilu-card">
			<view class="card-title">老师评语</view>
			<template v-if="coachForm.coach_text || (coachForm.coach_images && coachForm.coach_images.length)">
				<view class="coach-content" v-if="coachForm.coach_text">{{ coachForm.coach_text }}</view>
				<view class="img-upload-area" v-if="coachForm.coach_images && coachForm.coach_images.length">
					<view v-for="(img, idx) in coachForm.coach_images" :key="idx" class="img-box">
						<image :src="web_url + img" class="img-preview"></image>
					</view>
				</view>
				<view class="job-time" v-if="coachForm.coach_time">{{ coachForm.coach_time }}</view>
			</template>
		</view>
		<!-- 提交按钮 -->
		<view class="btn-area">
			<button class="main-btn" @tap="submitHomework" v-if="!isFlag">提交作业</button>
		</view>
	</view>
</template>
<script>
	import uploads from "@/util/upload.js";
	const webConfig = require("@/util/config");
	export default {
		data() {
			return {
				form: {
					content: '',
					images: [],
					time: ''
				},
				teacherComment: '', // 假如后端返回
				maxImg: 6,
				order_id: '',
				web_url: '',
				isFlag: false,
				coachForm: {
					coach_images: [],
					coach_text: '',
					coach_time: ''
				}
			}
		},
		onLoad(options) {
			console.log(options);
			this.order_id = options.id
			this.web_url = webConfig.base_url || '';
			this.getOrderDetails()
		},
		methods: {
			getOrderDetails() {
				
						this.$http({
							url: 'addons/xilufitness/order/getDetail',
							data: { id: this.order_id },
							method: 'get'
						}).then(res => {
							let detail = res.data.info.result_detail
							let status = res.data.info.result_status
							this.form.content = detail.user_text
							this.form.images = detail.user_images ? detail.user_images.split(',') : []
							this.form.time = detail.user_time
							if (status == 4) {
								this.coachForm.coach_text = detail.coach_text
								this.coachForm.coach_images = detail.coach_images ? detail.coach_images.split(',') : []
								this.coachForm.coach_time = detail.coach_time
								this.isFlag = true
							}
						})
				
			
				
				
			},

			chooseImg() {

				let _this = this;
				if (this.form.images.length > 6) {
					uni.showToast({
						title: '图片不得超过六张',
						icon: 'none'
					})
					return
				}
				this.$api.chooseFile(1, function(res) {
					console.log(res);
					uploads.uploadFile(res[0].tempFilePath, function(uploadRes, uploadTask) {
						console.log(uploadRes, uploadTask);
						if (uploadRes.code == 1) {
							_this.form.images.push(uploadRes.data.url)
							console.log('images', _this.form.images);
						} else {
							_this.$api.toast(uploadRes.msg || '上传失败')
						}
					});
				})
			},
			removeImg(idx) {
				this.form.images.splice(idx, 1)
			},
			submitHomework() {
				if (!this.form.content.trim()) {
					uni.showToast({
						title: '请填写作业内容',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '提交中'
				})
				console.log(this.order_id);
				this.$http({
					url: 'addons/xilufitness/order/effectOrder',
					data: {
						order_id: this.order_id,
						content: this.form.content,
						image: this.form.images
					},
					method: 'post'

				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
				})

			}
		}
	}
</script>